import { View, StyleSheet, Modal, Text, ActivityIndicator } from 'react-native';
import React, { forwardRef, useState, useImperativeHandle } from 'react';
import { px2dp, scale } from '~/utils/px2dp';

interface Props {
    title?: string;
    loadingColor?: string;
}

const MyLoading = forwardRef((props: Props, ref: any) => {
    const { title = '加载中', loadingColor = '#fff' } = props;
    const [visible, setVisible] = useState(false);

    const showLoading = () => {
        setVisible(true);
    };
    const hideLoading = () => {
        setVisible(false);
    };

    useImperativeHandle(
        ref,
        () => ({
            showLoading,
            hideLoading,
        }),
        [showLoading, hideLoading],
    );
    return (
        <Modal
            animationType={'none'}
            onRequestClose={hideLoading}
            supportedOrientations={['landscape', 'portrait']}
            transparent
            visible={visible}>
            <View style={styles.container}>
                <View style={styles.box}>
                    <ActivityIndicator color={loadingColor} size={'large'} />
                    <Text style={styles.title}>{title}</Text>
                </View>
            </View>
        </Modal>
    );
});
export default MyLoading;

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        zIndex: 1,
    },
    box: {
        justifyContent: 'center',
        alignItems: 'center',
        height: px2dp(240),
        padding: px2dp(24),
        width: px2dp(240),
        backgroundColor: 'rgba(0, 0, 0, 0.5)',
        borderRadius: px2dp(12),
        flexDirection: 'column',
    },
    title: {
        color: '#fff',
        fontSize: scale(30),
        marginTop: px2dp(22),
        textAlign: 'center',
        marginHorizontal: px2dp(20),
    },
});
